<template>
  <div class="home-header">
    <div class="contraction-button">
      <i class="el-icon-s-fold" @click="handleShrik" v-show="isShrink"></i>
      <i class="el-icon-s-unfold" @click="handleShrik" v-show="!isShrink"></i>
    </div>
    <el-dropdown @command="handleInstruction">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="iconfont icon-tuichu" command="quit"
          >退出登录</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations("home", ["handleShrik"]),
    ...mapMutations("login", ["setToken"]),
    handleInstruction(instruction) {
      if (instruction === "quit") {
        this.$confirm("确定要退出吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.setToken("");
            this.$message.success("退出成功");
            this.$router.push("/login");
          })
          .catch(() => {});
      }
    },
  },
  computed: {
    ...mapState("home", ["isShrink"]),
    ...mapState("login", ["token"]),
  },
};
</script>

<style lang="less" scoped>
.home-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .contraction-button {
    i {
      font-size: 20px;
      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
